<template>
  <section @mouseleave="dataTab.onMouseLeave">
    <!-- 顶部导航栏 -->
    <section class="header -shadow -pos-f -w100p -z100 -shadow" :class="{ hide: !isShowNavigation }">
      <ul class="z-contain -flex--s -h100p">
        <li class="logo-div -pointer -flex--c">
          <nuxt-link to="/">
            <img src="@/assets/images/logo@340x100.png" />
          </nuxt-link>
        </li>
        <li class="navs-div -f1">
          <ul class="-flex--s -fs1_2rem -h100p">
            <li
              :class="['-flex--c', '-pointer', { active: props.activeIndex === index }]"
              v-for="(item, index) in routeList"
              :key="index"
              @click="dataTab.activeIndexChange(index)"
              @mouseenter="dataTab.onMouseEnter(index)"
              @mouseleave="dataTab.onMouseLeave"
            >
              <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
            </li>
          </ul>
        </li>
        <li class="user-div">
          <ul class="-flex--c -h100p">
            <el-switch :modelValue="isThemeLight" @update:modelValue="toggleTheme" :active-icon="Sunny" :inactive-icon="Moon" inline-prompt />
            <li v-if="Global.user.info.isLogin">
              <img src="@/assets/images/logo@340x100.png" />
              <span>{{ Global.user.info.nickname }}</span>
            </li>
            <li v-else class="-pointer">登录</li>
          </ul>
        </li>
      </ul>
    </section>
    <!-- 当导航消失时, 鼠标移入顶部可以显示导航 -->
    <section class="header-placeholder -pos-f -w100p -z100" v-show="!isShowNavigation" @mouseenter="dataTab.showNavigation"></section>
    <!-- 导航菜单栏 -->
    <HeaderMenu :show="isShowNavigation && dataMenu.show" :menuInfo="dataMenu.menuInfo" @mouseenter="dataTab.onMouseEnter()"></HeaderMenu>
  </section>
</template>

<script lang="ts" setup>
import { findPathIndex, routeList } from "@/router";
import HeaderMenu from "./HeaderMenu.vue";
import { Sunny, Moon } from "@element-plus/icons-vue";
import Global from "@/store";
import { isShowNavigation } from "./useNavShow";
import { isThemeLight, toggleTheme, initTheme } from "./useTheme";

const props = defineProps({
  activeIndex: Number,
});

const emits = defineEmits<{
  (e: "update:activeIndex", index: number): void;
}>();

///////////////////////////////// 头部tab ///////////////////////////////
const dataTab = shallowReactive({
  /** 定时器任务，用于终止控制菜单隐藏事件 */
  timer: 0 as unknown as NodeJS.Timeout,
  /** 鼠标移入导航项事件 */
  onMouseEnter: (index?: number) => {
    if (dataTab.timer) {
      clearTimeout(dataTab.timer);
    }
    if (index !== undefined) {
      dataMenu.hoverIndex = index;
      dataMenu.show = routeList[index].isHideMenu ? false : true;
    }
  },
  /** 鼠标移出导航项事件 */
  onMouseLeave: () => {
    dataTab.timer = setTimeout(() => {
      dataMenu.show = false;
    }, 200);
  },
  /** 点击导航项事件 */
  activeIndexChange: (index: number) => {
    emits("update:activeIndex", index);
  },
  showNavigation: () => {
    isShowNavigation.value = true;
  },
});

///////////////////////////////// 头部菜单 ///////////////////////////////
const dataMenu = shallowReactive({
  /** 是否显示菜单 */
  show: false,
  /** 当前菜单内容（路由信息） */
  menuInfo: {} as RouteItem,
  /** 鼠标激活的tab */
  hoverIndex: 0,
});
/** 监控鼠标激活的tab, 切换菜单内容 */
watch(
  () => dataMenu.hoverIndex,
  () => {
    dataMenu.menuInfo = routeList[dataMenu.hoverIndex];
  },
  { immediate: true }
);

onMounted(() => {
  initTheme();
});
</script>

<style lang="scss" scoped>
.header-placeholder {
  height: calc($navigation-head-height * 0.78);
  background-color: transparent;
  /** 悬浮在导航处,下滑页面, 让placeholder延迟出现 */
  animation: height 1s;
  @keyframes height {
    from {
      height: 0;
    }
    /** 防止header还没消失就触发了显示 */
    90% {
      height: 0;
    }
  }
}
.header {
  height: $navigation-head-height;
  background-color: transparent;
  transition: transform 1s;
  background-color: var(--head-nav-bg);
  &.hide {
    transform: translateY(-100%);
  }
  .logo-div {
    margin-right: 20px;
    img {
      height: 46px;
    }
  }
  .navs-div {
    > ul {
      color: var(--text-color-main);
      > li {
        margin: 0 20px;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 0%;
          height: 3px;
          background-color: transparent;
          transition: all 0.5s;
        }
        &.active {
          font-weight: 700;
          color: var(--theme-color);
          &::before {
            bottom: 10px;
            width: 88%;
            background-color: var(--theme-color);
          }
        }
        &:not(.active):hover {
          font-weight: 700;
          color: $cyan;
          &::before {
            bottom: 10px;
            width: 88%;
            background-color: $cyan;
          }
        }
      }
    }
  }
  .user-div {
  }
}
</style>
